// 引入主题色
@import "../../app.less";

page {
    background: #fff;
    // 设置首页字体大小
    @font-size: 30rpx;
    padding: 0 50rpx;
    box-sizing: border-box;

    // 固定定位
    .fixedBox {
        height: 200rpx;
        .fixed {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #fff;
            z-index: 999;
        }
    }

    // 设置头部样式
    header {
        overflow: hidden;

        // 轮播图模块
        .swiper {
            border-radius: 10rpx;
            overflow: hidden;

            swiper {
                width: 100%;
                height: 250rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    // 标题文字
    .title{
        width: 100%;
        padding: 20rpx 0;
        font-size: 18px;
    }

    // 主体部分
    .main {
        margin-top: 20rpx;
        overflow: hidden;

        // 热门服务
        .hotBox {

            // 热门服务图片区域
            .hotImg {
                display: flex;
                justify-content: space-between;
                height: 180rpx;
                margin-bottom: 20rpx;
                image {
                    width: 48%;
                    height: 100%;
                }
            }
            // 附加业务
            .housework{
                width: 100%;
                display: flex;
                .houseworkItem{
                    flex: 1;
                    text-align: center;
                    font-size: 24rpx;
                    box-sizing: border-box;
                    &:nth-child(n+2){
                        border-left: 1px solid #eee;
                    }
                }
            }
        }
        // 精选服务
        .goodServices{
            padding-bottom: 60rpx;
            // 服务模块
            .service(@bgColor,@color){
                border-radius: 10rpx;
                overflow: hidden;
                margin-bottom: 40rpx;
                .itemsBox,.serviceTitle{
                    height: 80rpx;
                }
                // 服务标题
                .serviceTitle{
                    display: flex;
                    align-items: center;
                    padding: 0 30rpx;
                    box-sizing: border-box;
                    background: @bgColor;
                    font-size: 16px;
                }
                // 具体服务
                .itemsBox{
                    display: flex;
                    border-bottom: 1rpx solid #EFEFEF;
                    border-left: 1rpx solid #EFEFEF;
                    .item{
                        flex: 1;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: 14px;
                        border-right: 1rpx solid #EFEFEF;
                        .itemName{
                            display: flex;
                            flex: 2;
                            justify-content: flex-start;
                            align-items: center;
                        }
                        .iconfont{
                            display: flex;
                            flex: 1.2;
                            font-size: 20px;
                            justify-content: center;
                            margin-right: -15rpx;
                            color: @color;
                            &.small{
                                font-size: 15px;
                            }
                            &.Reduce{
                                font-size: 16px;
                            }
                            &.big{
                                font-size: 22px;
                            }
                        }
                    }
                }
            }
            // 居家保洁
            .service1{
                .service(#C5F5FC,#C5F5FC)
            }
            // 电器清洗
            .service2{
                .service(#B7FFD8,#B7FFD8)
            }
            // 保姆月嫂
            .service3{
                .service(#FFC1CF,#FFC1CF)
            }
            // 深度清洁
            .service4{
                .service(#E8FFB7,#E8FFB7)
            }
            // 日式收纳
            .service5{
                .service(#EDC2FF,#EDC2FF)
            }
        }

        // 在线找保姆
        .onlineFind{
            margin: 0 10rpx 50rpx;
            padding: 30rpx;
            box-sizing: border-box;
            box-shadow: 0 0 10rpx rgba(0,0,0,.2);
            border-radius: 15rpx;
            .online-top{
                border-bottom: 1px solid #eee;
                display: flex;
                .online-top-left{
                    flex: 2;
                    box-sizing: border-box;
                    padding-top:20rpx ;
                    .online-title{
                        font-size: 40rpx;
                        font-weight: bold;
                    }
                    .online-alt{
                        font-size: 24rpx;
                        color: #ccc;
                    }
                }
                image{
                    flex: 1;
                    height: 100%;
                }
            }
            .online-bottom{
                padding-top: 20rpx;
                font-size: 28rpx;
                font-weight: bold;
                color: #f00;
                text-align: center;
            }
        }
    }
}